<template>
  <div class="father">
    <div class="container">
      <div class="box">
        <h2>用户登录</h2>
        <div class="con">
          <span class="pos">地区</span>
          <div class="po">
            <div class="left">小区</div>
            <div class="right">广东/深圳/深圳湾一号</div>
          </div>
        </div>

        <div class="main">
          <span>账户</span>
          <input type="text" id="name" placeholder="Username" />
          <input type="password" id="passwd" placeholder="Password" />
          <a
            ><input type="sumbit" name="" value="login" @click="handleLogin"
          /></a>
          <span class="register" @click="handleRegister">注册</span>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
// import $ from 'jQuery'
export default {
  beforeRouteLeave(to, from, next) {
    if (this.isLogin) next();
  },
  data() {
    return {
      isLogin: false,
    };
  },
  methods: {
    toData(obj) {
      if (obj === null) {
        return obj;
      }
      let arr = [];
      for (let i in obj) {
        let str = i + "=" + obj[i];
        arr.push(str);
      }
      return arr.join("&");
    },
    ajax(obj) {
      //指定提交方式的默认值
      obj.type = obj.type || "get";
      //设置是否异步，默认为true(异步)
      obj.async = obj.async || true;
      //设置数据的默认值
      obj.data = obj.data || null;
      // 根据不同的浏览器创建XHR对象
      let xhr = null;
      if (window.XMLHttpRequest) {
        // 非IE浏览器
        xhr = new XMLHttpRequest();
      } else {
        // IE浏览器
        // xhr = new ActiveXObject("Microsoft.XMLHTTP");
        alert("我们不支持ie");
      }
      // 区分get和post,发送HTTP请求
      if (obj.type === "post") {
        xhr.open(obj.type, obj.url, obj.async);
        xhr.setRequestHeader(
          "Content-Type",
          "application/x-www-form-urlencoded"
        );
        let data = this.toData(obj.data);
        xhr.send(data);
      } else {
        let url = obj.url + "?" + this.toData(obj.data);
        xhr.open(obj.type, url, obj.async);
        xhr.send();
      }
      // 接收返回过来的数据
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
            if (obj.success) {
              // resolve
              obj.success(JSON.parse(xhr.responseText));
            }
          } else {
            if (obj.error) {
              // reject
              obj.error(xhr.status);
            }
          }
        }
      };
    },
    handleClick() {
      this.$router.push({ name: "Services" });
    },
    handleLogin() {
      let name = document.getElementById("name");
      let passwd = document.getElementById("passwd");
      let _this = this;
      this.ajax({
        url: "http://120.78.191.206:8080/login",
        type: "post",
        data: {
          username: name.value,
          password: passwd.value,
        },
        success: function (data) {
          console.log(data);
          if (data.code === 2000) {
            _this.isLogin = true
            _this.handleClick()
            alert(data.msg);
          }else{
            alert(data.msg);
          }
        },
      });
    },
    handleRegister() {
      let name = document.getElementById("name");
      let passwd = document.getElementById("passwd");
      console.log(name.value, passwd.value);
      this.ajax({
        url: "http://120.78.191.206:8080/register",
        type: "post",
        data: {
          username: name.value,
          password: passwd.value,
        },
        success: function (data) {
          alert(data.msg)
        },
      });
    },
  },
};
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
}

ul {
  list-style: none;
}

button {
  outline: none;
}

h2 {
  color: #4fd6a0;
}

@keyframes bganimation {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0 50%;
  }
}

.container {
  position: relative;
  width: 330px;
  height: 570px;
  margin: 88px auto;
  background: #34405ecd;
  border-radius: 15px;
}

.container::before {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  left: -2px;
  bottom: -2px;
  background-color: #34405e;
  z-index: -1;
}

.container::after {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  left: -2px;
  bottom: -2px;
  background-color: #34405e;
  z-index: -2;
  filter: blur(40px);
}

.main .register {
  position: relative;
  color: #999;
  padding-left: 130px;
}

.container .box {
  padding: 40px 0;
}

.container .box h2 {
  margin: 10px 110px;
}

.container .box .con {
  margin: 18px 20px;
}

.container .box .con span,
.main span {
  padding: 0 5px;
  display: inline-block;
  font-size: 14px;
  color: #2ecc71;
  margin: 10px 0;
}

.container .box .con p {
  font-size: 14px;
  padding: 10px 5px;
  /* border: 1px solid black; */
  background-color: white;
}

.container .box .con .po {
  width: 300px;
  height: 40px;
  background-color: white;
  font-size: 14px;
  line-height: 40px;
  border-radius: 15px;
  border: none;
  /* border: 1px solid; */
}

.container .box .con .po .left {
  float: left;
  margin: 0 4px;
}

.container .box .con .po .right {
  float: right;
  margin: 0 9px;
}

.main {
  color: white;
  margin: 30px 20px;
}

.main input[type="text"],
.box input[type="Password"] {
  border: 0px;
  background: none;
  display: block;
  margin: 30px auto;
  text-align: center;
  border: 2px solid #3498db;
  padding: 14px 10px;
  width: 200px;
  outline: none;
  color: white;
  border-radius: 24px;
  transition: 0.25s;
}

.main input[type="text"]:focus,
.box input[type="Password"]:focus {
  width: 250px;
  border-color: #2ecc71;
}

.main input[type="sumbit"] {
  border: 0px;
  background: none;
  display: block;
  margin: 20px auto;
  text-align: center;
  border: 2px solid #2ecc71;
  padding: 14px 40px;
  width: 50px;
  outline: none;
  color: white;
  border-radius: 24px;
  transition: 0.25s;
  cursor: pointer;
}

.main input[type=" sumbit"]:hover {
  background: #2ecc71;
}

.father {
  position: absolute;
  top: 0;
  height: 812px;
  width: 375px;
  left: 0;
  background-image: linear-gradient(
    125deg,
    #2c3e50,
    #27ae60,
    #2980b9,
    #e74c3c,
    #8e44ad
  );
  background-size: 400%;
  animation: bganimation 15s infinite;
}
</style>